<template>
	<view class="box">
		<view class="search">
			<input type="text" class="ser-inp" placeholder="请输入对方昵称" v-model="nickName">
			<view class="sea-btn" @click="addFriend">添加好友</view>
		</view>
		<view class="user-list">
			<view class="user-item" v-for="item in toBeAgreed">
				<view class="ul">
					<image :src="item.avatar"></image>
					<view class="online"></view>
				</view>
				<view class="nl">
					{{item.nickname}} - LV:{{item.level}}  <text style="color: #ccc;">请求添加你为好友 </text>
				</view>
				<view class="ok-btn" @click="ok" :data-userId="item.id">
					同意
				</view>
				<view class="no-btn" @click="no" :data-userId="item.id">
					拒绝
				</view>
			</view>
			<view class="user-item" v-for="item in userList">
				<view class="ul">
					<image :src="item.avatar"></image>
					<view class="online"></view>
				</view>
				<view class="nl">
					{{item.nickname}} - LV:{{item.level}}
				</view>
				<view class="add-btn" @click="invitationToEnter" :data-user="item">
					邀请进入
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="error" class="error-text">{{errorMsg}}</uni-popup-message>
		</uni-popup>
		
		<uni-popup ref="popup1" type="message">
			<uni-popup-message type="success" class="success-text">{{successMsg}}</uni-popup-message>
		</uni-popup>
		
		
	</view>
</template>

<script>
import { addFriend,getFriendList,agreeFriend,deleteFriend,getMyFriendList }  from "@/api/friends.js";
export default{
	name:"AddFriends",
	data(){
		return{
			errorMsg:"",
			successMsg:"",
			nickName:"",
			toBeAgreed:[],
			userList:[]
		}
	},
	mounted(){
		this.getFriend();
	},
	onShow(){
		console.log(123);
		this.getFriend();
	},
	methods:{
		invitationToEnter(e){
			console.log(e);
			//获取对方id
			let userId = e.currentTarget.dataset.user.id;
			//谁发对
			let name = uni.getStorageSync("userInfo").nickname;
			let sendId = uni.getStorageSync("userInfo").id;
			//消息数据
			let json = {
				toUserId:userId,
				sendUserId:sendId,
				sendName:name,
				content:"邀请进游戏"
			}
			//邀请对方进入组队
			client.send("/mori/invitation", {}, JSON.stringify(json));
		},
		ok(e){
			let userId = e.target.dataset.userId;
			let data = {
				"userId":userId
			}
			agreeFriend(data).then((data)=>{
				this.successMsg = "已同意"
				this.$refs.popup1.open('top');
				this.getFriend();
			})
		},
		no(e){
			let userId = e.target.dataset.userId;
			let data = {
				"userId":userId
			}
			deleteFriend(data).then((data)=>{
				this.errorMsg = "已拒绝"
				this.$refs.popup.open('top');
				this.getFriend();
			})
		},
		addFriend(){
			let data = {
				"nickName":this.nickName
			}
			addFriend(data).then((res) =>{
				if(res.code == 500){
					this.errorMsg = res.msg
					this.$refs.popup.open('top');
				}else{
					this.successMsg = res.msg
					this.$refs.popup1.open('top');
					this.nickName = "";
				}
			})
		},
		getFriend(){
			getFriendList().then((data)=>{
				console.log("data",data.data)
				//this.toBeAgreed
				
				// 提取 usersEntity 中的 id, nickname, avatar, level 字段
				const usersEntities = data.data.map(item => ({
				    id: item.usersEntity.id,
				    nickname: item.usersEntity.nickname,
				    avatar: item.usersEntity.avatar,
				    level: item.usersEntity.level
				}));
				this.toBeAgreed = usersEntities;
				
			})
			
			
			getMyFriendList().then((data)=>{
				console.log("data",data.data)
				//this.toBeAgreed
				
				// 提取 usersEntity 中的 id, nickname, avatar, level 字段
				const usersEntities = data.data.map(item => ({
				    id: item.usersEntity.id,
				    nickname: item.usersEntity.nickname,
				    avatar: item.usersEntity.avatar,
				    level: item.usersEntity.level
				}));
				this.userList = usersEntities;
				
			})
			
			
		}
	}
}
</script>

<style scoped>
.error-text {
	color: #f56c6c;
	text-align: center;
}
.success-text {
	color: #68f597;
	text-align: center;
}
.box{
	width: 100%;
	height: 80vh;
}
.search{
	width: 100%;
	height: 40px;
	display: flex;
	border: 2px solid rgba(215, 213, 227, 0.2);
}
.user-list{
	width: 100%;
	height: 70vh;
	overflow-y: auto;
}
.ser-inp{
	width: calc(80% - 10px);
	height: 100%;
	line-height: 100%;
	border: none;
	padding-left: 10px;
}
.sea-btn{
	width: 20%;
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 40px;
	background-color: brown;
}
.user-item{
	width: 100%;
	height: 50px;
	display: flex;
	margin-top: 10px;
	box-shadow: 0 0 8px 2px rgba(99, 12, 13, 0.1);
}
.ul{
	width: 50px;
	height: 50px;
}
.ul > image{
	width: 50px;
	height: 50px;
	border-radius: 5px;
}
.nl{
	width: calc(100% - 180px);
	height: 50px;
	line-height: 50px;
	padding-left: 20px;
}
.online{
	width: 15px;
	height: 15px;
	background-color: #0bff13;
	border-radius: 50%;
	position: relative;
	left: 33px;
	bottom: 22px;
}
.add-btn{
	height: 50px;
	line-height: 50px;
	background-color: #460a17;
	color: #fff;
	width: 120px;
	text-align: center;
	border-radius: 5px;
}

.ok-btn{
	height: 50px;
	line-height: 50px;
	background-color: #246d35;
	color: #fff;
	width: 55px;
	text-align: center;
	border-radius: 5px;
}
.no-btn{
	height: 50px;
	line-height: 50px;
	background-color: #6a2716;
	color: #fff;
	width: 55px;
	text-align: center;
	border-radius: 5px;
	margin-left: 10px;
}
</style>